<style lang="scss" scoped>
.main {
  background-color: #f3f2f2;
  height: calc(100vh - $tabbar-height);
  overflow: scroll;
  scroll-padding-top: calc($navbar-height + $search-height + 30px);
}

.navbar_container {
  height: 40px;
}

.category-container {
  margin: 0 2.67vw 15px 2.67vw;
  width: 95%;

  .title {
    width: 100%;
    text-align: center;
    font-weight: 600;
  }
}

.center-container {
  margin-top: 10px;
}

.side-bar {
  background-color: #f7f8fa;
  overflow: hidden;
  padding: 5px;
}

.search-container {
  height: $search-height;
}
</style>
<template>
  <div class="main" @scroll="calc_card">
    <van-row>
      <van-col span="24">
        <van-sticky>
          <div class="navbar_container">
            <van-nav-bar
              left-arrow
              left-text="返回"
              style="height: 100%"
              title="所有分类"
              @click-left="back_to_home"
            />
          </div>
          <div class="search-container">
            <FakeSearch></FakeSearch>
          </div>
        </van-sticky>
        <van-sticky></van-sticky>
      </van-col>
    </van-row>

    <div class="center-container">
      <!--左侧的大类别展示栏-->
      <van-row>
        <van-col span="6">
          <van-sticky offset-top="100">
            <div class="display-card side-bar">
              <van-sidebar
                v-model="active_sidebar_item"
                style="width: 100%"
                @change="click_nav"
              >
                <van-sidebar-item
                  v-for="item in classify_data"
                  :key="item.id"
                  :title="item.name"
                />
              </van-sidebar>
            </div>
          </van-sticky>
        </van-col>

        <!--右侧的分类展示栏-->
        <van-col span="18">
          <div id="scroll_card" class="right-container">
            <van-row v-for="(item, index1) in classify_data">
              <div class="display-card category-container">
                <div :id="item.name" class="title">
                  <h1>{{ item.name }}</h1>
                </div>
                <van-grid :column-num="2">
                  <van-grid-item
                    v-for="item in classify_data_children[index1]"
                    :key="item.id"
                    :text="item.name"
                    icon="photo-o"
                    @click="
                      $router.push({
                        name: 'category',
                        query: {
                          id: item.id,
                        },
                      })
                    "
                  />
                </van-grid>
              </div>
            </van-row>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { api_get_shop_classify } from "@/service/api/menu";
import { useRouter } from "vue-router";
// 引入pinia仓库
import { use_category_store } from "@/stores/category-store";
// 引入组件
import FakeSearch from "@/components/FakeSearch.vue";
// 侧边导航栏设置
let active_sidebar_item = ref(0);
const $router = useRouter();
// 返回首页
const back_to_home = () => {
  $router.push("home");
};

const category_store = use_category_store();
// 请求数据栏
const params = {
  project_id: 1,
  limit: 999,
};
let classify_data: any = ref([]);
let classify_data_children: any = ref([]);
const get_classify = async () => {
  let res: any = await api_get_shop_classify(params);
  classify_data.value = res.result;
  category_store.category = res.result;
  classify_data_children.value = res.result.map((item: any) => {
    return item.children;
  });
};

// 点击跳转至页面的当前位置
const click_nav = (nav_index: number): void => {
  const current_name: string = classify_data.value[nav_index].name;
  const returnEle = document.querySelector(`#${current_name}`);
  if (!!returnEle)
    returnEle.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "end",
    });
};

// 滚动页面触发监听事件,如果分类卡片窗口超出了可视范围则切换导航栏到下一个标签,如果卡片窗口出现了则切换到上一个标签
const calc_card = () => {
  //获取子元素的列表高度
  const scroll_card = document.querySelector("#scroll_card");
  // 对数据进行处理,只要每个子元素的动态坐标位置
  let child_ele_height = [...scroll_card!.children].map((item) => {
    return item.getBoundingClientRect();
  });
  // 找top值最小,且大于0的子元素
  let active_child = (): number => {
    let smallest_top = Infinity;
    let active_index = 0;
    child_ele_height.forEach((item, index) => {
      if (item.top > 0 && item.top < smallest_top) {
        smallest_top = item.top;
        active_index = index;
      }
    });
    return active_index;
  };
  // 赋值给组件上v-modol,可以设置active的标签是哪个
  active_sidebar_item.value = active_child();
};

onMounted(() => {
  get_classify();
});
</script>
